{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-success text-white text-center py-3">
                <h4 class="mb-0"><i class="bi bi-person-plus me-2"></i>用户注册</h4>
            </div>
            <div class="card-body p-4">
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                        <div class="alert alert-{{ category }} alert-dismissible fade show mb-3">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

                <form method="POST" action="{{ url_for('register') }}">
                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="mb-3">基本信息</h5>
                            
                            <div class="mb-3">
                                <label for="username" class="form-label">用户名 *</label>
                                <input type="text" class="form-control" id="username" name="username" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱 *</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="password" class="form-label">密码 *</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="confirm_password" class="form-label">确认密码 *</label>
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="role" class="form-label">角色 *</label>
                                <select class="form-select" id="role" name="role" required>
                                    <option value="">选择角色</option>
                                    <option value="student">学生</option>
                                    <option value="teacher">教师</option>
                                    <option value="enterprise">企业</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <h5 class="mb-3">角色信息</h5>
                            <div class="alert alert-info">
                                <small>请根据选择的角色填写相应信息</small>
                            </div>
                            
                            <div id="studentFields" style="display: none;">
                                <div class="mb-3">
                                    <label for="full_name" class="form-label">姓名</label>
                                    <input type="text" class="form-control" id="full_name" name="full_name">
                                </div>
                                <div class="mb-3">
                                    <label for="student_id" class="form-label">学号</label>
                                    <input type="text" class="form-control" id="student_id" name="student_id">
                                </div>
                                <div class="mb-3">
                                    <label for="major" class="form-label">专业</label>
                                    <input type="text" class="form-control" id="major" name="major">
                                </div>
                            </div>
                            
                            <div id="teacherFields" style="display: none;">
                                <div class="mb-3">
                                    <label for="teacher_name" class="form-label">姓名</label>
                                    <input type="text" class="form-control" id="teacher_name" name="full_name">
                                </div>
                                <div class="mb-3">
                                    <label for="department" class="form-label">院系</label>
                                    <input type="text" class="form-control" id="department" name="department">
                                </div>
                            </div>
                            
                            <div id="enterpriseFields" style="display: none;">
                                <div class="mb-3">
                                    <label for="company_name" class="form-label">公司名称</label>
                                    <input type="text" class="form-control" id="company_name" name="company_name">
                                </div>
                                <div class="mb-3">
                                    <label for="contact_person" class="form-label">联系人</label>
                                    <input type="text" class="form-control" id="contact_person" name="contact_person">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-success btn-lg px-5">
                            <i class="bi bi-person-plus me-2"></i>注册账号
                        </button>
                    </div>
                </form>
                
                <hr class="my-4">
                
                <div class="text-center">
                    <p class="mb-0">已有账号？</p>
                    <a href="{{ url_for('login') }}" class="btn btn-outline-secondary mt-2">
                        <i class="bi bi-box-arrow-in-right me-2"></i>立即登录
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 显示/隐藏角色相关字段
document.getElementById('role').addEventListener('change', function() {
    const role = this.value;
    document.getElementById('studentFields').style.display = role === 'student' ? 'block' : 'none';
    document.getElementById('teacherFields').style.display = role === 'teacher' ? 'block' : 'none';
    document.getElementById('enterpriseFields').style.display = role === 'enterprise' ? 'block' : 'none';
});
</script>
{% endblock %}